<template>
    <div class="product-content">
        <div class="content-title" v-show="props.title !== undefined">
            <!-- 标题 -->
            <span>{{props.title}}</span>
        </div>
        <div class="content-container">
            <div class="container-item" v-for="item,index in productInfo.items" :key="index">
                <img :src="item.productImg" alt="商品图片" @click="showGoodDetail(item.productId)">
                <p class="item-title">{{ item.productFullName }}</p>
                <p class="item-price">￥{{ item.productLowPrice }}</p>
            </div>
        </div>
        <span class="content-bottom">{{ productInfo.page >= productInfo.pages ? '已经到底了' : '加载中...'}}</span>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineProps } from "vue";
//@ts-ignore引入请求函数
import { reqProductList } from "@/api/home/index.ts";
//引入ts类型约束
//import type { productDataType } from "@/api/home/type.ts";
//引入vue-router
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
//组件props
const props = defineProps(['title']);
//渲染的商品相关数据
const productInfo = reactive<{counts:number,pageSize:number,page:number,pages:number,items:{productId:number,productFullName:string,productImg:string,productLowPrice:string}[]}>({
    counts:0,
    pageSize:10,  //每页数据条数
    pages:1,  //计算出的总页数
    page:0,  //当前页数
    items:[]
})
//vue生命周期
onMounted(() => {
    //获取商品数据列表
    getProductList();
})

//分页获取商品列表数据
const getProductList = async () => {
    //请求下一页数据
    if(productInfo.page >= productInfo.pages) return;
    productInfo.page ++;
    //请求
    let res:any = await reqProductList(productInfo.page, productInfo.pageSize);
    //@ts-ignore处理返回的商品数据
    res.result.rows.forEach(item => {
        item.price = item.commercialSpecificationList[0].commodityPrice;
        for(let j = 1; j < item.commercialSpecificationList.length; j++){
            if(item.commercialSpecificationList[j].commodityPrice < item.price){
                item.price = item.commercialSpecificationList[j].commodityPrice;
            }
        }
    })
    let dealProductInfo:any = res.result.rows.map(item => {
        return {
            productId:item.productId,
            productFullName:item.productName +" "+ item.productDescription,
            productImg:item.productImgs.split(",")[0],
            productLowPrice:(item.price.toFixed(2))
        }

    })
    //根据条件进行赋值
    if(productInfo.items.length == 0){
        productInfo.items = dealProductInfo;
        productInfo.counts = res.result.total;
        productInfo.pages = Math.ceil(productInfo.counts / productInfo.pageSize);
    } else {
        productInfo.items.push(...dealProductInfo);
    }
    console.log('前台分页获取商品数据api',res);
}

//点击商品的事件
const showGoodDetail = (goodsId:number) => {
    //console.log('goodsId=',goodId);
    router.push({path:"/detail",query:{goodsId:goodsId}});
}

//向外导出
defineExpose({
    getProductList,
})

</script>

<style scoped lang="less">
.product-content{
    display:flex;
    flex-direction:column;
    align-items:center;

    .content-title{
        display:flex;
        justify-content:center;
        align-items:center;
        margin:18px 0;
        span{
            font-size:16px;
            color:#000;
            margin:0 10px;
        }
        &::before{
            content:"";
            width:10px;
            height:10px;
            background:url("../../assets/images/bubble.png");
            background-size:contain;
        }
        &::after{
            content:"";
            width:10px;
            height:10px;
            background:url("../../assets/images/bubble.png");
            background-size:contain;
        }
    }
    .content-container{
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        margin: 0 10px;

        .container-item{
            width:175px;
            height:220px;
            position: relative;
            padding:12px;
            display:flex;
            box-sizing: border-box;
            flex-direction:column;
            justify-content: space-between;
            margin-bottom:6px;
            background-color:#fff;

            img{
                width:150px;
                height:148px;
            }
            .item-title{
                width: 150px;
                height: 43px;
                color:#000;
                font-size:12px;
                margin:5px 0 7px 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .item-price{
                color:#ff0000;
                font-size:13px;
            }
        }
    }
    .content-bottom{
        font-size:12px;
        color:#44bb94;
        margin:20px 0;
    }
}
</style>